<div class="cil__new-item-block">
  <img class="cil__top-image" src="assets/images/centaur/change.svg" />
  <app-detail-header [title]="'USER.BTN.CREATE' | i18n" [ifEditable]="false"></app-detail-header>
  <form class="cil__base-block--form" [formGroup]="validateForm" nz-form>
    <div nz-row [nzGutter]="24">
      <div nz-col [nzSpan]="12">
        <nz-form-item>
          <nz-form-label>{{'USER.USERNAME' | i18n}}</nz-form-label>
          <nz-form-control nzHasFeedback>
            <input formControlName="username" name="username" nz-input />
            <nz-form-explain>
              <ng-container
                *ngTemplateOutlet="errorTpl;context:{control:validateForm.get('username'), name:'username'}">
              </ng-container>
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>
      </div>

      <div nz-col [nzSpan]="12">
        <nz-form-item>
          <nz-form-label>{{'USER.NAME' | i18n}}</nz-form-label>
          <nz-form-control nzHasFeedback>
            <input formControlName="nickName" name="nickName" nz-input />
            <nz-form-explain>
              <ng-container
                *ngTemplateOutlet="errorTpl;context:{control:validateForm.get('nickName'), name:'nickName'}">
              </ng-container>
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>
      </div>

      <div nz-col [nzSpan]="12">
        <nz-form-item>
          <nz-form-label>{{'GENERAL.INFO.EMAIL' | i18n}}</nz-form-label>
          <nz-form-control nzHasFeedback>
            <input formControlName="email" name="email" nz-input />
            <nz-form-explain>
              <ng-container *ngTemplateOutlet="errorTpl;context:{control:validateForm.get('email'), name:'email'}">
              </ng-container>
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>
      </div>

      <div nz-col [nzSpan]="12">
        <nz-form-item>
          <nz-form-label>{{'USER.USER_ROLE' | i18n}}</nz-form-label>
          <nz-form-control nzHasFeedback>
            <nz-select name="userRole" formControlName="userRole">
              <nz-option *ngFor="let user of userRoles" [nzLabel]="user.roleName" [nzValue]="user.roleId"></nz-option>
            </nz-select>
            <nz-form-explain>
              <ng-container
                *ngTemplateOutlet="errorTpl;context:{control:validateForm.get('userRole'), name:'userRole'}">
              </ng-container>
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>
      </div>

      <div nz-col [nzSpan]="12">
        <nz-form-item>
          <nz-form-label>{{'USER.PASSWORD' | i18n}}</nz-form-label>
          <nz-form-control nzHasFeedback>
            <input formControlName="password" type="password" name="password" nz-input />
            <nz-form-explain>
              <ng-container
                *ngTemplateOutlet="errorTpl;context:{control:validateForm.get('password'), name:'password'}">
              </ng-container>
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>
      </div>

      <div nz-col [nzSpan]="12">
        <nz-form-item>
          <nz-form-label>{{'USER.PASSWORD_CONFIRM' | i18n}}</nz-form-label>
          <nz-form-control nzHasFeedback>
            <input formControlName="passwordCF" type="password" name="passwordCF" nz-input />
            <nz-form-explain>
              <ng-container
                *ngTemplateOutlet="errorTpl;context:{control:validateForm.get('passwordCF'), name:'passwordCF'}">
              </ng-container>
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>
      </div>

      <ng-container *ngIf="selectType === ERoleType.Acquirer && (auditConfigs$ | async)?.length > 0">
        <div nz-col [nzSpan]="24">
          <nz-form-item>
            <nz-form-label>{{'USER.TITLE.AUDIT_CONFIG' | i18n}}</nz-form-label>
            <div nz-row [nzGutter]="24">
              <ng-container *ngFor="let config of auditConfigs$ | async">
                <nz-form-control nz-col [nzSpan]="12">
                  <div>{{EAuditType[config.type] | i18n}}</div>
                  <nz-select [nzAllowClear]="true" nzMode="multiple" [(ngModel)]="auditConfigKVMap[config.type]" [ngModelOptions]="{standalone: true}" (ngModelChange)="selectChange($event, config.type)">
                    <nz-option *ngFor="let step of config.steps" [nzLabel]="step.stepName" [nzValue]="step.stepID"></nz-option>
                  </nz-select>
                </nz-form-control>
              </ng-container>
            </div>
          </nz-form-item>
        </div>
      </ng-container>
    </div>
  </form>
</div>

<ng-template #errorTpl let-control="control" let-name="name">
  <ng-container *ngIf="control.dirty">
    <ng-container *ngIf="control.hasError('required'); else second">{{ errorTips[name]?.required }}</ng-container>
    <ng-template #second>
      <ng-container *ngIf="control.hasError('maxlength'); else third">{{ errorTips[name]?.maxLength }}</ng-container>
    </ng-template>
    <ng-template #third>
      <ng-container *ngIf="control.hasError('minlength'); else fourth">{{ errorTips[name]?.minLength }}</ng-container>
    </ng-template>
    <ng-template #fourth>
      <ng-container *ngIf="control.hasError('pattern'); else fifth">{{ errorTips[name]?.pattern }}</ng-container>
    </ng-template>
    <ng-template #fifth>
      <ng-container *ngIf="control.hasError('usernameConflicting'); else sixth">{{ errorTips[name]?.usernameConflicting }}</ng-container>
    </ng-template>
    <ng-template #sixth>
      <ng-container *ngIf="control.hasError('passwordInvalid'); else seventh">{{ errorTips[name]?.passwordInvalid }}</ng-container>
    </ng-template>
    <ng-template #seventh>
      <ng-container *ngIf="control.hasError('mustMatch')">{{ errorTips[name]?.mustMatch }}</ng-container>
    </ng-template>
  </ng-container>
</ng-template>